<template>
  <div class="mask" @touchstart="touchstart" @touchmove.prevent="touchmove" v-if="maskShow">
    <img :src="backgroundImg" class="head_img" style="position: absolute;top: 0;width: 10rem;height: 100%;z-index:-1">
    <div style="background: rgba(25,25,25,.6);position: absolute;height: 100%;width: 100%">
      <SheadV1 color="#ffffff" class="sheadv1" :is_show_username="true" margin="0 auto" :userinfo="dUserinfo" v-if="dUserinfo" width="2.6rem" height="2.6rem">
      </SheadV1>
      <div class="intro minifont" @click="getmoreintro">
        <p  v-html="'简介：'+intro(dUserinfo.intro)"  class="intro_content"></p>
        <span  class="getMoreIntroBtn" v-if="introIsOverflow">...更多</span>
      </div>
      <miniprogramcode :uid="dUserinfo.uid" width="3.6rem" height="3.6rem" style="margin:1rem auto"></miniprogramcode>
      <div style="text-align: center">
        <i aria-hidden="true" class="fa fa-angle-double-down" style="color: white;font-size: 1.3rem"></i>
      </div>
    </div>

  </div>
</template>
<script>
import SheadV1 from "@/components/user/s_head_v1.vue"
import miniprogramcode from "@/components/codes/MiniprogramCode.vue"
export default {
  props:{
    userinfo:{
      type:[Object,Array],
      default:[]
    }
  },
  computed:{
    backgroundImg:function(){
      let _this=this
      if (_this.dUserinfo.background_img) {
        return _this.$store.getters.getDomain+'/Uploads/'+_this.dUserinfo.background_img
      }else if(_this.dUserinfo.head_img){
        return _this.dUserinfo.head_img
      }else{
        return '/Public/images/avatar.png'
      }
    }
  },
  methods:{
    getmoreintro(){
      this.$router.push({name:'MoreIntro'})
    },
    touchstart(e){
      e.stopPropagation()
      this.starty = e.touches[0].clientY
    },
    touchmove(e){
      e.stopPropagation()
      let _this = this
      console.log(_this.moveBool);
      _this.movey = e.touches[0].clientY
      if ((_this.movey - _this.starty)>100){
        //console.log("下滑")
      }else if((_this.movey - _this.starty)<-100){
        //console.log("上滑")
        let wh = $(window).height()
        if (_this.$route.name=="PersonIndex"){
          _this.$router.push({name:'Work'})
        }

        $(".mask").css({
          transform: "translateY(-"+wh+"px)",
          transition: "transform 1s ease"
        })
        setTimeout(function(){
          $(".mask").hide()
        },1200)
      }
    },
    calIntroIsOverflow(){
      let _this = this
      if($(".intro").find('.intro_content').height() > $('.intro').height()){
        _this.introIsOverflow=1
      }else{
        _this.introIsOverflow=0
      }
    }
  },
  data(){
    return {
        dUserinfo:this.userinfo,
        moveBool:false,
        p:"",
        introIsOverflow:0,
        maskShow:true
    }
  },
  watch:{
    userinfo(n,o){
      this.dUserinfo = n
    }
  },
  components:{
    SheadV1,miniprogramcode
  },
  updated() {
    this.calIntroIsOverflow()
  },
  mounted() {
      let _this=this
      if (_this.$route.query.nomask!==undefined){
          _this.maskShow=false
      }
  }
}
</script>
<style scoped>
.sheadv1{margin-top: 1.1rem;}
.mask{background: #8C8B8B;}
.intro{border-radius: 10px;
  margin:0 auto;
  margin-top: 1rem;
  box-sizing: border-box;
  padding: 0 .1rem;width: 9rem;line-height: .6rem;color: black;overflow: hidden;background: rgba(33,33,33);
  position: relative;
  max-height: 3.6rem;
  overflow: hidden;
}
.intro .getMoreIntroBtn{
  position: absolute;
  color: #00d6d6;
  bottom: .15rem;
  height: .5rem;
  right: 0;
  padding: 0 .21rem;
  border-radius: 5% 0 0 0;
  background: rgba(33,33,33);
}
.intro>p{
  color: #fff;
}
@keyframes dd {
  0%{transform: translateY(0px);}
  50%{transform: translateY(20px);}
  100%{transform: translateY(0px);}
}
  .fa-angle-double-down{animation: infinite 1s linear dd}
</style>
